<template>
    <div>
        <!-- 导航栏标题 -->
        <van-nav-bar title="攻略论吧" left-arrow @click-left="onClickLeft" />
        <!-- 列表 -->
        <van-grid :gutter="15" :border="true" :column-num="1">
            <van-grid-item v-for="item in SpecialList" :key="item.id">
                <van-image :src="item.images" />
                <div class="text">
                    <p style="margin-top: 10px;">{{ item.texta }}</p>
                    <p style="display: flex;justify-content: space-between;"><span style="color: #555;">12345人参与评论</span>
                        <span style="color: red;">2积分</span>
                    </p>
                </div>
                <div style="display: flex; align-items: center;">
                    <img style="width: 20px;height: 20px;
                    border-radius: 20px;" src="../../assets/gongge/gongge1.png" alt="">
                    <span>"第一次喝这么好喝的汤"</span>
                </div>
                <van-cell-group inset>
                    <van-field v-model="message" rows="1" autosize left-icon="edit" label="留言" type="textarea" placeholder="请输入留言 "  label-align="center" right-icon="certificate"/>
                </van-cell-group>
            </van-grid-item>
        </van-grid>

    </div>
</template>

<script setup>
const onClickLeft = () => history.back();
import httpApi from '@/http';
import { ref, onMounted } from 'vue';

const SpecialList = ref([])
// const value = ref()
onMounted(() => {
    httpApi.IndexApi.querySpecialList().then(res => {
        console.log(res);
        SpecialList.value = res.data.data
    })
})
</script>

<style lang="scss" scoped>
.van-image {
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
    // height: 120px;
    object-fit: fill;

}

.sidebar {
    width: 200px;
}

.text {


    p {
        font-size: 12px;
        font-weight: bold;
        margin-bottom: 10px;

    }
}
</style>